<template>
  <el-container>
    <el-main>
      <el-form ref="articleForm" :model="form" :rules="rules" label-width="80px">
        <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
          <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">基本信息</span>
        </div>
        <el-form-item label="主标题" prop="title">
          <el-col :span="12">
            <el-input v-model="form.title"/>
          </el-col>
        </el-form-item>
        <el-form-item label="副标题" prop="subTitle">
          <el-col :span="12">
            <el-input v-model="form.subTitle"/>
          </el-col>
        </el-form-item>
        <el-form-item label="分类">
          <el-col :span="12">
            <el-input v-model="categoryName" suffix-icon="el-icon-arrow-down" @focus="dialogShow"/>
          </el-col>
        </el-form-item>
        <el-form-item label="报名费">
          <el-col :span="12">
            <el-input type="number" @mousewheel.native.prevent v-model="form.price"/>
          </el-col>
        </el-form-item>
        <el-form-item label="活动时间">
          <el-col :span="12">
            <el-input v-model="form.articleMeta.time"/>
          </el-col>
        </el-form-item>
        <el-form-item label="活动地址">
          <el-col :span="12">
            <el-input v-model="form.articleMeta.address"/>
          </el-col>
        </el-form-item>
        <el-form-item label="位置标签">
          <el-select v-model="tagData" multiple placeholder="请选择">
            <el-option
              v-for="item in tagForm"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否草稿">
          <el-radio-group v-model="form.isDraft">
            <el-radio :label="false">发布</el-radio>
            <el-radio :label="true">草稿</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="缩略图" prop="thumbnail">
          <single-upload :singleUploadTitle='singleUploadTitle' v-model="form.thumbnail"
                         style="display: inline-block;margin-left: 10px"></single-upload>
        </el-form-item>
        <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
          <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">图文介绍</span>
        </div>
        <tinymce v-model="form.content" :height="400"/>
      </el-form>
      <el-button class="el-button—class" type="primary" :loading="clicked" @click="saveArticle('articleForm')">
        &nbsp&nbsp完 成&nbsp&nbsp
      </el-button>
      <category-dialog ref="categoryDialog" request="articleCategory" @confirm="categoryDialogConfirm"/>
    </el-main>
  </el-container>
</template>
<style scoped>
  .el-button—class {
    margin-top: 20px;
  }
</style>
<script>
  import {EventBus} from '@/api/eventBus'
  import utils from '../../utils/utils.js'
  import {save} from '@/api/article'
  import {list as tagList} from '@/api/tag'
  import Tinymce from '@/components/Tinymce'
  import CategoryDialog from '@/components/CategoryDialog'
  import SingleUpload from '@/components/Upload/singleUpload'
  export default {
    name: 'article-add',
    filters: {},
    components: {
      Tinymce, CategoryDialog, SingleUpload
    },
    data() {
      return {
        singleUploadTitle:'750*900',
        clicked: false, // 按钮防双击
        categoryName: '',
        form: {
          mediaType:0,
          isDraft: false, // 是否为草稿
          title: '',
          subTitle: '',
          thumbnail: '',
          content: '',
          articleCategoryId: '',
          articleType: 0,
          authority: 0,
           articleMeta: {
            address: "",
            time: "",
          },
          price: 0,
          orders:0
        },
        isDraft: 0,
        subscribe: false,
        tagData: [],
        tagForm: [],
        rules: {
          title: [
            {required: true, message: '请输入主标题', trigger: 'blur'},
            {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
          ],
          subTitle: [
            {required: true, message: '请输入副标题', trigger: 'blur'},
            {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
          ],
          thumbnail: [
            {required: true, message: '请上传缩略图', trigger: 'blur'}
          ],
        }
      }
    },
    created() {
      this.tagList()
    },
    methods: {
      dialogShow() {
        console.log('点击了')
        this.$refs.categoryDialog.show()
      },
      categoryDialogConfirm(val) {
        this.form.articleCategoryId = val.id;
        this.categoryName = val.name;
      },
      tagList() {
        var _this = this
        let params = new URLSearchParams();
        params.append('pageNum', 1);
        params.append('pageSize', 20);
        params.append('type', 0)
        tagList(params).then(response => {
          console.log(response)
          _this.tagForm = response.data.data
        }).catch(error => {
          console.log('error!!')
        });
      },
      saveArticle(form) {
        const _this = this
        this.$refs[form].validate((valid) => {
          if (valid) { // 校验表单
            _this.clicked = true;
            let params = new URLSearchParams();
            _this.tagData.forEach(function (item) {
              params.append('tagIds', item);
            })
            save(_this.form, params).then(response => {
              console.log(response)
              _this.clicked = false;
              if (response.type == 'success') {
                EventBus.$emit('article-add', response.data)
                _this.$store.dispatch('tagsView/delView', _this.$route).then(({visitedViews}) => {
                  _this.$router.push({
                    path: '/article/list'
                  })
                })// 关闭当前tab回到列表
              } else {
                _this.$message({
                  message: response.content,
                  offset: 120,
                  center: true
                })
              }
            }).catch(error => {
              _this.clicked = false
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }
  }
</script>
